<template>
  <el-card class="box-card">
    <div slot="header" >
      <el-button  icon="el-icon-back" circle class="backBtn" @click="goMain()"></el-button>
      <span>邮箱换绑</span>
    </div>
    <el-form>
      <el-form-item>
        <el-input v-model="email" placeholder="请输入新的邮箱">
          <el-button slot="append" @click="getVerifyCode">{{btnTitle}}</el-button>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="verifyCode" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-button class="color">更换绑定</el-button>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'changeEmail',
  data () {
    return {
      email: '',
      verifyCode: '',
      codeStr: '',
      btnTitle: '获取验证码'
    }
  },
  methods: {
    goMain () {
      this.$router.replace('/case/personal')
    },
    bangding () {
      // 绑定用户邮箱验证码
      const bindData = {
        phone: this.email,
        verifyNumber: this.verifyCode
      }
      this.$axios.post('/UserController', bindData).then(res => {
        console.log(res.data.message)
        alert(res.data.message)
      })
    },

    // 请求发送验证码的方法
    sendEmail () {
      // 请求表格数据
      const data = {
        phone: this.email
      }
      this.$axios.post('/UserController', data).then(res => {
        console.log('验证码发送成功')
      })
    }
  }
}
</script>
<style scoped>
.backBtn {
  float: left;
}
.color {
  background-color:#42b983
}
</style>
